<script>window.demoVersion = '2017.08.31';</script>

<!--
> Muaz Khan     - https://github.com/muaz-khan
> MIT License   - https://www.webrtc-experiment.com/licence/
> Documentation - https://github.com/streamproc/MediaStreamRecorder
> =================================================================
> audio-recorder.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <title>MultiStreamRecorder.js & MediaStreamRecorder</title>

    <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">

    <style>
        input {
            border: 1px solid rgb(46, 189, 235);
            border-radius: 3px;
            font-size: 1em;
            outline: none;
            padding: .2em .4em;
            width: 60px;
            text-align: center;
        }
    </style>
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>
                MultiStreamRecorder.js & <a href="https://github.com/streamproc/MediaStreamRecorder">MediaStreamRecorder</a>
            </h1>
            <p>
                <a href="https://www.webrtc-experiment.com/msr/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/streamproc/MediaStreamRecorder/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/streamproc/MediaStreamRecorder/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <section style="text-align: center; margin-top: 15px; color: red; font-family: Courier New; font-weight: bold;" id="demoVersion"></section>
        <script>document.getElementById('demoVersion').innerHTML = 'Last Updated On: <time>' + new Date(window.demoVersion).toDateString() + '</time>';</script>

        <blockquote>
            Recording multiple videos in single WebM using <a href="https://github.com/streamproc/MediaStreamRecorder">MediaStreamRecorder</a>
        </blockquote>

        <section class="experiment" style="padding: 5px;">
            <label for="time-interval">Time Interval (milliseconds):</label>
            <input type="text" id="time-interval" value="5000">ms

            <button id="start-recording">Start</button>
            <button id="stop-recording" disabled>Stop</button>

            <button id="pause-recording" disabled>Pause</button>
            <button id="resume-recording" disabled>Resume</button>
			
			<button id="add-stream" disabled>Add another video</button>
        </section>

        <section class="experiment">
            <div id="container"></div>
        </section>

        <script>
            function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
                navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
            }

            var mediaConstraints = {
                audio: true,
                video: true
            };

            document.querySelector('#start-recording').onclick = function() {
                this.disabled = true;
                captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
            };

            document.querySelector('#stop-recording').onclick = function() {
                this.disabled = true;
                multiStreamRecorder.stop();
                multiStreamRecorder.stream.stop();

                document.querySelector('#pause-recording').disabled = true;
                document.querySelector('#start-recording').disabled = false;
				document.querySelector('#add-stream').disabled = true;
            };

            document.querySelector('#pause-recording').onclick = function() {
                this.disabled = true;
                multiStreamRecorder.pause();

                document.querySelector('#resume-recording').disabled = false;
            };

            document.querySelector('#resume-recording').onclick = function() {
                this.disabled = true;
                multiStreamRecorder.resume();

                document.querySelector('#pause-recording').disabled = false;
            };

            var multiStreamRecorder;

            var audioVideoBlobs = {};
            var recordingInterval = 0;

            function onMediaSuccess(stream) {
                var video = document.createElement('video');

                video = mergeProps(video, {
                    controls: true,
                    muted: true
                });
                video.srcObject = stream;

                video.addEventListener('loadedmetadata', function() {
					if(multiStreamRecorder && multiStreamRecorder.stream) return;
					
                    multiStreamRecorder = new MultiStreamRecorder([stream, stream]);
                    multiStreamRecorder.stream = stream;
					
					multiStreamRecorder.previewStream = function(stream) {
						video.src = URL.createObjectURL(stream);
						video.play();
					};

                    multiStreamRecorder.ondataavailable = function(blob) {
                        appendLink(blob);
                    };

                    function appendLink(blob) {
                        var a = document.createElement('a');
                        a.target = '_blank';
                        a.innerHTML = 'Open Recorded ' + (blob.type == 'audio/ogg' ? 'Audio' : 'Video') + ' No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);

                        a.href = URL.createObjectURL(blob);

                        container.appendChild(a);
                        container.appendChild(document.createElement('hr'));
                    }

                    var timeInterval = document.querySelector('#time-interval').value;
                    if (timeInterval) timeInterval = parseInt(timeInterval);
                    else timeInterval = 5 * 1000;

                    // get blob after specific time interval
                    multiStreamRecorder.start(timeInterval);
					
					document.querySelector('#add-stream').disabled = false;
					document.querySelector('#add-stream').onclick = function() {
						if(!multiStreamRecorder || !multiStreamRecorder.stream) return;
						multiStreamRecorder.addStream(multiStreamRecorder.stream);
					};

                    document.querySelector('#stop-recording').disabled = false;
                    document.querySelector('#pause-recording').disabled = false;
                }, false);

                video.play();

                container.appendChild(video);
                container.appendChild(document.createElement('hr'));
            }

            function onMediaError(e) {
                console.error('media error', e);
            }

            var container = document.getElementById('container');
            var index = 1;

            // below function via: http://goo.gl/B3ae8c
            function bytesToSize(bytes) {
                var k = 1000;
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes === 0) return '0 Bytes';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
                return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
            }

            // below function via: http://goo.gl/6QNDcI
            function getTimeLength(milliseconds) {
                var data = new Date(milliseconds);
                return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
            }

            window.onbeforeunload = function() {
                document.querySelector('#start-recording').disabled = false;
            };
        </script>

        <section class="experiment">
        <h2 id="how-to-use">How to use?</h2>
        <pre style="border-left: 2px solid red; margin-left:2em; padding-left: 1em;">
// cdn.webrtc-experiment.com/MediaStreamRecorder.js
var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
	var arrayOfStreams = [stream, stream, stream, stream];
    var multiStreamRecorder = new MultiStreamRecorder(arrayOfStreams);
    multiStreamRecorder.ondataavailable = function(blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('&lt;a href="' + blobURL + '"&gt;' + blobURL + '&lt;/a&gt;');
    };
    multiStreamRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}
</pre>
        </section>

        <section class="experiment">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/streamproc/MediaStreamRecorder/commits/master" target="_blank">Latest Issues</a>
            </h2>
            <div id="github-issues"></div>
        </section>

        <section class="experiment">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/streamproc/MediaStreamRecorder/commits/master" target="_blank">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>

        <section class="experiment"><small id="send-message"></small></section>

        <script>
            window.useThisGithubPath = 'streamproc/MediaStreamRecorder';
        </script>
        <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
    </article>

    <a href="https://github.com/streamproc/MediaStreamRecorder" class="fork-left"></a>

    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
        </p>
    </footer>
</body>

</html>
